<template>
  <view class="login">
    <template v-if="showType == 1">
      <PhoneLogin @toggle="handToggle"></PhoneLogin>
    </template>

    <template v-else-if="showType == 2">
      <UserLogin @toggle="handToggle"></UserLogin>
    </template>

    <template v-else-if="showType == 3">
      <RegisterForm @toggle="handToggle"></RegisterForm>
    </template>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import PhoneLogin from "./component/PhoneLogin.vue"; //手机号登录
import UserLogin from "./component/UserLogin/index.vue"; //账号登录
import RegisterForm from "./component/RegisterForm.vue";

const showType = ref(2); // 1: 手机号登录  2: 账号登录 3: 注册

function handToggle(value) {
  showType.value = value;
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  padding: 0 55rpx;
  height: 100%;
  padding-top: 250rpx;
  overflow: hidden;
}
</style>
